<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="基本配置" name="first">
        <div>
          <el-form ref="form" :model="form" :rules="rules" label-width="120px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="栏目中文名称" prop="cnname">
                  <el-input v-model="form.cnname" placeholder="请输入栏目中文名称" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="栏目英文名称">
                  <el-input v-model="form.enname" placeholder="请输入栏目英文名称" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="表单模型">
                  <el-select v-model="form.formId" placeholder="请选择表单模型"  style="width: 500px">
                    <el-option v-for="item in formList" :key="item.id" :label="item.formName +'|'+ item.code" :value="item.id"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="栏目图片">
                  <imageUpload v-model="form.imagePath" ></imageUpload>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="上级栏目">
                  <treeselect
                    v-model="form.parentId"
                    :options="categoryOptions"
                    :normalizer="normalizer"
                    :show-count="true"
                    placeholder="选择上级栏目"
                    style="width:500px"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="跳转方式">
                  <el-select v-model="form.linkTarget" placeholder="请选择跳转方式"  style="width: 500px">
                    <el-option v-for="dict in dict.type.cms_category_jump" :key="dict.value" :label="dict.label" :value="dict.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="分页大小">
                  <el-input v-model="form.pageSize" placeholder="请输入分页大小" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="栏目描述">
                  <el-input v-model="form.description" placeholder="请输入栏目描述" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="栏目内容">
                  <editor v-model="form.htmlContent" style="height: 600px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24" style="padding-top: 26px">
                <el-form-item label="显示/隐藏">
                  <el-radio-group v-model="form.isShow">
                    <el-radio
                      v-for="dict in dict.type.cms_display"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="是否允许投稿">
                  <el-radio-group v-model="form.isInput">
                    <el-radio
                      v-for="dict in dict.type.cms_input"
                      :key="dict.value"
                      :label="dict.value"
                    >{{dict.label}}</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="formSave">保 存</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="模板管理" name="second">
        <div>
          <el-form ref="templateForm" :model="templateForm"  label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="栏目模型">
                  <el-select v-model="form.catModel" placeholder="请选择栏目模型"  style="width: 500px">
                    <el-option v-for="dict in dict.type.cms_category_model" :key="dict.value" :label="dict.label" :value="dict.value"/>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="访问地址">
                  <el-input v-model="form.visitUrl" placeholder="请输入访问地址" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="封面模版">
                  <el-input v-model="form.coverTemp" placeholder="请输入封面模版" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="列表模版">
                  <el-input v-model="form.listTemp" placeholder="请输入列表模版" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="内容页模版">
                  <el-input v-model="form.articleTemp" placeholder="请输入内容页模版" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="链接地址">
                  <el-input v-model="form.linkUrl" placeholder="请输入链接地址" style="width: 500px"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="templateFormSave">保 存</el-button>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="扩展" name="third">
        <div>
          <el-form ref="exform" :model="exForm"  label-width="100px">
            <el-row>
              <el-col :span="24">
                <el-form-item label="扩展字段1">
                  <el-input v-model="form.ext01" placeholder="请输入扩展字段1" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="扩展字段2">
                  <el-input v-model="form.ext02" placeholder="请输入扩展字段2" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="扩展字段3">
                  <el-input v-model="form.ext03" placeholder="请输入扩展字段3" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="扩展字段4">
                  <el-input v-model="form.ext04" placeholder="请输入扩展字段4" style="width: 500px"/>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="扩展字段5">
                  <el-input v-model="form.ext05" placeholder="请输入扩展字段5" style="width: 500px"/>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="exFormSave">保 存</el-button>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import {getFormList, findCategory, saveCategory, updateCategory, getCategoryList} from "@/api/cms/demo";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "categoryAdd",
  dicts: ['cms_category_model', 'cms_display', 'cms_input', 'cms_category_jump'],
  components: { Treeselect },
  data() {
    return {
      query:{
        id: '',
        parentId: ''
      },
      form: {
        cnname: '',
        enname: '',
        formId: '',
        isShow: '1',
        isInput: '0',
        parentId: '-1',
        pageSize: '10',
        linkTarget: '1',
        imagePath: '',
        htmlContent: '',
        ext01: '',
        ext02: '',
        ext03: '',
        ext04: '',
        ext05: '',
        catModel: '1',
        visitUrl: '',
        coverTemp: 'index_article.html',
        listTemp: 'list_article.html',
        articleTemp: 'article_article.html',
        linkUrl: ''
      },
      templateForm: {

      },
      exForm: {

      },
      activeName: 'first',
      formList: [],
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      dialogVisible: false,
      dialogImageUrl:'',
      categoryOptions: [],
      rules:{
        cnname: [
          { required: true, message: "栏目名称不能为空", trigger: "blur" },
        ],
        formId: [
          { required: true, message: "所属表单不能为空", trigger: "blur" }
        ],
      },
    };
  },
  created() {
    this.query.id = this.$route.query.id;
    this.query.parentId = this.$route.query.parentId;
    this.form.parentId = this.query.parentId;
    this.getForms();
    this.getTreeselect();
    this.findCategoryById();
  },
  methods: {
    handleClick(tab, event) {
    },
    exFormSave() {
      if(this.form.id==null) {
        saveCategory(this.form).then(response => {
          this.$message({
            message: '栏目添加成功',
            type: 'success'
          });
        })
      }else{
        updateCategory(this.form).then(response => {
          this.$message({
            message: '栏目修改成功',
            type: 'success'
          });
        })
      }
    },
    templateFormSave() {
      if(this.form.id==null) {
        saveCategory(this.form).then(response => {
          this.$message({
            message: '栏目添加成功',
            type: 'success'
          });
        })
      }else{
        updateCategory(this.form).then(response => {
          this.$message({
            message: '栏目修改成功',
            type: 'success'
          });
        })
      }
    },
    formSave() {
      if(this.form.id==null) {
        saveCategory(this.form).then(response => {
          this.$message({
            message: '栏目添加成功',
            type: 'success'
          });
        })
      }else{
        updateCategory(this.form).then(response => {
          this.$message({
            message: '栏目修改成功',
            type: 'success'
          });
        })
      }
    },
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.cnname,
        children: node.children
      };
    },
    getTreeselect() {
      getCategoryList().then(response => {
        this.categoryOptions = [];
        const category = { id: '-1', cnname: '顶级栏目', children: [] };
        category.children = this.handleTree(response.data, "id");
        this.categoryOptions.push(category);
      });
    },
    getForms() {
      getFormList().then(response=>{
        this.formList = response.data;
      })
    },
    findCategoryById() {
      if(this.query.id!='') {
        findCategory(this.query.id).then(response=>{
          this.form = response.data;
          this.form.isInput = ''+response.data.isInput;
          this.form.isShow = ''+response.data.isShow;
          this.form.catModel = ''+response.data.catModel
        })
      }
    }
  }
}
</script>

<style scoped>
.dialog-footer{
  padding-left: 20px;
}
.label{
  width: 200px;
}
</style>
